<template>
  <a-modal
      title="角色授权"
      centered
      :width="920"
      :bodyStyle="{maxHeight: '80vh',overflow: 'auto'}"
      v-model:visible="visible"
      :confirm-loading="confirmLoading"
      :afterClose="remove"
      @ok="handleOk"
  >
    <a-row :gutter="[16,16]">
      <a-col :span="24">
        <a-card hoverable>
          角色名称:
          <a-input v-model:value="roleName" style="width: 260px;margin-left: 10px" placeholder="角色名称"/>
        </a-card>
      </a-col>
      <a-col v-for="(value, key) in roleList" :key="key" :span="6">
        <a-card hoverable>
          <template v-slot:title>
            <a-checkbox
                v-model:checked="checkAll[key]"
                :indeterminate="indeterminate[key]"
                @change="onCheckAllChange(key, $event)"
            >
              {{ key }}
            </a-checkbox>
          </template>
          <a-checkbox-group v-model:value="checkedList[key]" @change="onChange(key, $event)">
            <a-checkbox v-for="item in value" :value="item.id" :key="item.id">
             {{ item.title }}
            </a-checkbox>
          </a-checkbox-group>
        </a-card>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script lang="ts">
import {defineComponent, reactive, toRefs, ref} from 'vue'
import {Modal, Input, Card, Col, Row, Checkbox} from 'ant-design-vue'
import {addSchema} from "./add-schema"
import {useAsync} from "@/hooks"
import DynamicForm from '@/components/dynamic-form/dynamic-form.vue'
import {roleAuth} from "@/api/role/roles"
import {roleList} from './roleList'
import {permissionGetPerbyId} from '@/api/role/permission'

export default defineComponent({
  name: "auth-modal",
  components: {
    [Modal.name]: Modal,
    [Col.name]: Col,
    [Row.name]: Row,
    DynamicForm,
    [Input.name]: Input,
    [Card.name]: Card,
    [Checkbox.name]: Checkbox,
    [Checkbox.Group.name]: Checkbox.Group
  },
  props: {
    remove: { // 移除模态框
      type: Function
    },
    fields: {
      type: Object,
      required: true
    },
    callback: {
      type: Function,
      required: true
    }
  },
  setup(props) {

    const state = reactive({
      visible: true,
      roleName: props.fields.name,
      confirmLoading: false,
      indeterminate: {},
      checkAll: {},
      checkedList: {}
    })

    console.log(props.fields, 'props.fields')
    const perids = props.fields.perids.split(',')
    // const pernames = props.fields.pernames.split(',')
    // const obj = {}
    // perids.forEach((item, index) => obj[item] = pernames[index])
    // console.log(obj, '什么东西')
    // console.log(perids.length, 'perids')
    // console.log(pernames.length, 'pernames')

    for (const key in roleList) {
      const roleIds = roleList[key].map(item => item.id)
      state.checkedList[key] = perids.filter(item => roleIds.includes(item))
      state.checkAll[key] = state.checkedList[key].length == roleIds.length
    }

    // 全选反选
    const onCheckAllChange = (key, e) => {
      state.checkedList[key] = e.target.checked ? roleList[key].map(item => item.id) : []
      state.indeterminate[key] = false
    }

   const onChange = (key, checkedList) => {
      state.indeterminate[key] = !!checkedList.length && checkedList.length < roleList[key].length
      state.checkAll[key] = checkedList.length === roleList[key].length
    }

    const handleOk = async () => {
      state.confirmLoading = true
      const params = {
        id: props.fields.id,
        perids: Object.keys(state.checkedList).reduce((prev, curr) => state.checkedList[curr].concat(prev), [])
      }
      await roleAuth(params)
      state.confirmLoading = false
      state.visible = false
      props.callback()
    }

    return {
      ...toRefs(state),
      roleList,
      handleOk,
      onCheckAllChange,
      onChange,
    }
  }
})
</script>

<style lang="scss" scoped>
::v-deep(.ant-card) {
  height: 100%;

  .ant-checkbox-wrapper {
    margin-left: 0;
  }
}
</style>
